<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'jql.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
 //文档加载时执行
  $(function(){
  // var ele=$("#abc");//返回一个jquery对象
  // var ele1=$("#def");
  // alert(ele.text());//打印该元素的文本内容
  // alert(ele1.html());//打印该元素的html内容
 // alert("请看88");
  //$(".class").text("88");
  
  //$("[name=age]").val("hello");
   //alert($(":selected").text());
   //$("#mydiv").addClass("xxx");
   //alert("干掉");
  // $("#mydiv").removeClass("xxx");
  // alert("真干掉");
   //$("#mydiv").css("border","1px solid blue").css("width","100px").css("height","100px");
  // $("option").each(function(){//每次循环一个元素调用一次
  // alert($(this).val());//当前对象的值
   
  // });
 //$("#btn").click(function(){//元素点击时调用
 
 // alert("hello");
 // $("form").submit();
  //   });
   $("#btn").bind("click",function(){//给元素绑定一个点击事件
   
   alert("hello");
 //  $("form").submit();
   $("#btn").unbind("click");//解除当前元素的所有click事件
   });  
     
    $("#id1").hover(
    function(){//鼠标进去
    $("#id1").text("meili");
    },
    function(){
     $("#id1").text("hahaha");
    }
    ); 
     
  });
  
  
</script>
<style type="text/css">
.xxx{
 border: 1dx solid red;
 width: 100px;
 height: 100px;

}
</style>
  </head>
  
  <body>
    This is my JSP page. <br>
    <div id="abc">ABC</div>
    <div id="def"><p>DEF</p></div>
    <div class="class">hahah</div>
    <span class="class">meina</span>
    用户名：<input type="text" name="name"/><br/>
  年龄：<input type="text" name="age"/><br/>
  学历：
  <select name="education">
  <option value="1">大学</option>
  <option value="2">中学</option>
  <option value="3" selected="selected">小学</option>
  
  
  </select>
  <input type="submit"value="denglu" />
    <div id="mydiv">hello</div>
  <input type="button" value="xxx" id="btn"/>  
  <form action="http://www.jd.com"></form>
  <div id="id1" class="xxx">hahaha</div>
  </body>
</html>
